import { useNavigate, Link, Outlet } from "react-router-dom";
import React, { useEffect } from "react";

import { Layout, Menu } from "antd";

import { SendOutlined } from "@ant-design/icons";

const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;

function App(props) {
  const navigate = useNavigate();

  useEffect(() => {
    if (!sessionStorage.getItem("token")) {
      navigate("/login");
    }
  }, []);

  return (
    <div className="App">
      <Layout style={{ minHeight: "100vh" }}>
        <Header className="header" style={{ color: "white", fontSize: 20 }}>
          <span style={{ color: "#b2bec3" }}>蒙古文类文字检测系统 V1.0</span>
        </Header>
        <Layout>
          <Sider width={200} className="site-layout-background">
            <Menu
              mode="inline"
              defaultSelectedKeys={["1"]}
              defaultOpenKeys={["sub1"]}
              style={{ height: "100%", borderRight: 0 }}
              // theme=
            >
              <SubMenu key="sub1" icon={<SendOutlined />} title="蒙古文">
                <Menu.Item key="1">
                  <Link to="/m/mgw1">字符</Link>
                </Menu.Item>
                <Menu.Item key="2">
                  <Link to="/m/mgw2">句子</Link>
                </Menu.Item>
                <Menu.Item key="3">
                  <Link to="/m/mgw3">文本</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu key="sub2" icon={<SendOutlined />} title="满文">
                <Menu.Item key="4">
                  <Link to="/m/mw1">字符</Link>
                </Menu.Item>

                <Menu.Item key="5">
                  <Link to="/m/mw2">句子</Link>
                </Menu.Item>

                <Menu.Item key="6">
                  <Link to="/m/mw3">文本</Link>
                </Menu.Item>
              </SubMenu>

              <SubMenu key="sub3" icon={<SendOutlined />} title="托忒文">
                <Menu.Item key="7">
                  <Link to="/m/ttw1">字符</Link>
                </Menu.Item>
                <Menu.Item key="8">
                  <Link to="/m/ttw2">句子</Link>
                </Menu.Item>
                <Menu.Item key="9">
                  <Link to="/m/ttw3">文本</Link>
                </Menu.Item>
              </SubMenu>
              <SubMenu key="sub4" icon={<SendOutlined />} title="锡伯文">
                <Menu.Item key="10">
                  <Link to="/m/xbw1">字符</Link>
                </Menu.Item>
                <Menu.Item key="11">
                  <Link to="/m/xbw2">句子</Link>
                </Menu.Item>
                <Menu.Item key="12">
                  <Link to="/m/xbw3">文本</Link>
                </Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout style={{ padding: "0 24px 24px" }}>
            <Content
              className="site-layout-background"
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
              }}
            >
              <Outlet />
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </div>
  );
}

export default App;
